import {useCallback, useEffect, useRef, useState} from "react";
import HeaderTwo from "./two";
import axios from "axios";
import "../style/one.css"
import {useDispatch} from "react-redux"
import {update1} from "../store/slice/user";
import {addGoodsNum, useGoodSelector} from "../store/slice/good";

// 函数式组件名最好大写
function HeaderOne() {
    const [headerFlag, setHeaderFlag] = useState(false);
    const [numberValue, setNumberValue] = useState(0);
    const [arrList, setArrList] = useState([]);
    const [childrenData, setChildrenData] = useState("");
    const [divDisplay, setDivDisplay] = useState("none");
    const [color, setColor] = useState('red')
    const [githubList, setGitHubList] = useState([]);
    const [userList, setUserList] = useState([]);
    const [refValue2, setRefValue2] = useState(0);
    let refValue = useRef(0);
    let newArr = [];
    const dispatch = useDispatch();
    const {goodList} = useGoodSelector();
    // 函数组件没有生命周期，但是有hook，如果想完成类似与onmount的的功能，可以用useEffect
    // 第二个值是是依赖项，只有依赖项发生改变才会出发useEffect
    // 如果没有依赖项，那么每次进行页面渲染的时候都会执行,类似于在挂载阶段执行
    // https://api.github.com/search/repositories?q=r&sort=stars
    useEffect(() => {
        // axios.get("https://api.github.com/search/repositories", {
        //     params: {
        //         q: "r",
        //         sort: "stars"
        //     }
        // }).then(res => {
        //     console.log('QQQQ 成功后的结果值', res.data.items);
        //     // 将这段渲染
        //     setGitHubList(res.data.items);
        // })
        // https://api.github.com/search/users?q=r&sort=stars
        axios.get("https://api.github.com/search/users", {
            params: {
                q: "r",
                sort: "stars"
            }
        }).then(res => {
            console.log('QQQQ 用户列表res的值', res.data.items);
            setUserList(res.data.items);
        })
    }, []);
    // 数值来回切换
    const setNumber = () => {
        // useState声明的数据，类似与vue的响应式数据。
        // 用useState的set方法传递的值，会直接赋值给useState声明的数据
        setHeaderFlag(!headerFlag);
    }
    const setNumberPlus = () => {
        setNumberValue(numberValue + 1)
    }
    const setArr = () => {
        // 在react中应该避免直接修改用useSate声明的状态，而是用直接赋值的形式来做比较好
        // 这个方法是直接赋值，不是以往的用push去追加
        // react和vue不一样，vue是响应式数据，你可以用push直接追加进数组，这样也能改变数组
        // react不是响应式数据，所以想用push的话，你必须先拿到现有的数组，然后再将值追加进去。react多了一步，就是你要先拿到数组
        // newArr = [...arrList, {a: 1, b: 2, c: 3}]
        newArr = [...arrList];
        newArr.push({a: "变形金刚1", b: "变形金刚2", c: "变形金刚3"})
        setArrList(newArr);
    }
    const childrenFun = (childData) => {
        setChildrenData(childData);
    }
    const displayFun2 = (value) => {
        value ? setDivDisplay("block") : setDivDisplay("none");
    }
    const colorFun = (value) => {
        setColor(value);
    }
    // 注意，useRef声明的对象从功能上看起来类似于vue的ref，但他们还是有区别。比如useRef的值改变了，但是DOM并没有在页面上重新渲染
    // 请看下面的代码 点击一个按钮，refValue的数量 + 1， 在控制台打印的话值确实改变了。但是页面的数字没有变，因为他在改变值的同时没有重新渲染页面
    // 如果想重新渲染页面的值，还是要用useState的set方法来进行设置
    // 真TM麻烦
    // useCallback是useMemo的语法糖
    // 如果useCallback的依赖为空，那么每次执行的时候，refValueFun都保持不变
    const refValueFun = useCallback(() => {
        refValue.current = refValue.current + 1;
        setRefValue2(refValue.current);
    }, [])
    return (
        <>
            {/*react注释方法*/}
            <div>{headerFlag.toString()}</div>
            <div>{numberValue}</div>
            <div>{childrenData}</div>
            <div>{refValue2}</div>
            <div>仓库的数量: {goodList[0].goodsNum}</div>
            <button onClick={() => {
                dispatch(update1("李世民"))
            }}>点击切换仓库中的值
            </button>
            <button onClick={() => {
                dispatch(addGoodsNum(1))
            }}>仓库值+1
            </button>
            <button onClick={setNumber}>点我切换</button>
            <button onClick={setNumberPlus}>点我+1</button>
            <button onClick={setArr}>分配值给数组</button>
            <button onClick={refValueFun}>增加ref的值 + 1</button>
            {/*向子组件传递参数*/}
            <HeaderTwo arrList={arrList} childrenValue={childrenFun} displayFun={displayFun2}
                       colorCheckFun={colorFun}></HeaderTwo>
            <div style={{
                background: color,
                width: "100px",
                height: "50px",
                display: divDisplay
            }}>嘿嘿嘿，我跑出来了
            </div>
            {/*className的使用技巧*/}
            {/*引入css后，直接在className上面使用css的类名，就可以使用当前样式*/}
            <div className="one">用className来修改样式</div>
            {/*先进行遍历，遍历完成之后再定义div*/}
            {/*{githubList.map((item, index) => (*/}
            {/*    // <div key={item.id}>图片:{item.html_url}</div>*/}
            {/*    <div key={item.id}>*/}
            {/*        <a href={item.html_url} target="_blank">*/}
            {/*            <img src={item.avatar_url} style={{width: 100}} alt=""></img>*/}
            {/*        </a>*/}
            {/*    </div>*/}
            {/*))}*/}
            {/*外层套div*/}
            <div style={{width: 2000, display: "flex", flexWrap: "wrap"}}>
                {userList.map(item => (
                    <div key={item.id}>
                        <a href={item.html_url}>
                            <img src={item.avatar_url} alt="" style={{width: "100%"}}/>
                        </a>
                    </div>
                ))}
            </div>
        </>
    );
}

export default HeaderOne;
